﻿<div class="doc-part-box" id="panel">
  <h2>面板</h2>
  <p>像广告牌,分两部分,上面是大标题,下面是简介.面板是个容器,可放入其它零件.</p>
  <div class="grids">
    <div class="grid-2">
      <div class="panel">
        <div class="panel-head"><h2>标题h2</h2></div>
        <div class="panel-body">
          <p>面板内容,使用了p标记</p>
        </div>
      </div>
    </div>
    <div class="grid">
      <div class="panel primary">
        <div class="panel-head"><h4>垓下歌-项羽</h4></div>
        <div class="panel-body">
          <p>力拔山兮气盖世。时不利兮骓不逝。</p>
          <p>骓不逝兮可奈何！虞兮虞兮奈若何！</p>
        </div>
      </div>
    </div>
    <div class="grid">
      <div class="panel danger">
        <div class="panel-head"><h4 style="color:#fff">泊船瓜-王安石洲</h4></div>
        <div class="panel-body">
          <p>京口瓜洲一水间，钟山只隔数重山。</p>
          <p>春风又绿江南岸，明月何时照我还？</p>
        </div>
      </div>
    </div>
    <div class="grid">
      <div class="panel success">
        <div class="panel-head"><h4>短歌行-曹操</h4></div>
        <div class="panel-body">
          <p>慨当以慷，忧思难忘。何以解忧？唯有杜康。</p>
          <p>青青子衿，悠悠我心。但为君故，沉吟至今。</p>

        </div>
      </div>
    </div>
  </div>
  <br />
  <pre class="code">
&lt;div class="panel"&gt;
  &lt;div class="panel-head"&gt;标题&lt;/div&gt;
  &lt;div class="panel-body"&gt;
    内容
  &lt;/div&gt;
&lt;/div&gt;
</pre>
</div>